<template>
  <view class="detail-view">
    <up-image class="banner" :src="siteImage || bg" width="100%" height="150px" mode="widthFix" border radius="10"></up-image>
    <view class="content-text">
      <up-parse :content="siteActivityDetails"></up-parse>
    </view>
    <view class="status-bar" v-if="walkActivityId >= 35">
      <view class="to-map" @click="openMap">
        <image
          class="nav-icon"
          src=""
        ></image>
        <text>导航</text>
      </view>
      <template v-if="!unlockFlag">
        <view class="to-check" :style="{ opacity: canCheck ? 1 : 0.2 }" @click="toCheck">
          <text>去打卡</text>
        </view>
      </template>
      <template v-else>
        <view class="check-success">
          <text>已完成打卡</text>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
import { activityApi } from '@/api/activity/activity-app.js'

export default {
  data() {
    return {
      bg: 'https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E7%AB%9E%E8%B5%9B%E5%9C%B0%E5%9B%BE/u7.svg',
      siteActivityDetails: '',
      location: {},
      walkActivityId: 0,
      siteImage: '',
      userLat: '',
      userLng: '',
      canCheck: false,
      distance: 0,
      unlockFlag: true,
      id: 0,
    }
  },
  onLoad(options) {
    this.siteActivityDetails = JSON.parse(decodeURIComponent(options.siteActivityDetails))
    this.siteImage = options.siteImage
    this.location = JSON.parse(options.location)
    this.id = options.id
    this.walkActivityId = Number(options.walkActivityId)
    this.unlockFlag = JSON.parse(options.unlockFlag)

    uni.getLocation({
      type: 'gcj02',
      success: (res) => {
        this.userLat = res.latitude
        this.userLng = res.longitude
        this.distance = this.getDistance(this.userLat, this.userLng, this.location.latitude, this.location.longitude)
        this.canCheck = this.distance <= this.location.distance
      },
    })
  },
  onShow() {
    if (this.location && this.location.latitude && this.location.longitude) {
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          this.userLat = res.latitude
          this.userLng = res.longitude
          this.distance = this.getDistance(this.userLat, this.userLng, this.location.latitude, this.location.longitude)
          this.canCheck = this.distance <= this.location.distance
        },
      })
    }
  },
  methods: {
    toCheck() {
      if (!this.canCheck) {
        uni.showToast({
          title: `未到达打卡地点`,
          icon: 'none',
        })
        return false
      }

      uni.showLoading({
        title: '打卡中...',
      })
      activityApi.getUnlockMap(this.walkActivityId, this.id).then((res) => {
        uni.hideLoading()
        if (res.code == 0) {
          uni.showToast({
            title: '打卡成功',
          })
        }
      })
    },
    getDistance(lat1, lng1, lat2, lng2) {
      const radLat1 = (lat1 * Math.PI) / 180.0
      const radLat2 = (lat2 * Math.PI) / 180.0
      const a = radLat1 - radLat2
      const b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0
      const s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)))
      return s * 6378137.0
    },
    openMap() {
      uni.openLocation({
        latitude: this.location.latitude,
        longitude: this.location.longitude,
      })
    },
  },
}
</script>

<style scoped lang="scss">
.detail-view {
  padding: 30rpx 30rpx 260rpx 30rpx;

  .content-text {
    margin-top: 30rpx;
  }
}

.status-bar {
  background-color: white;
  border-radius: 40rpx 40rpx 0 0;
  padding: 50rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 30rpx;
  box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
}

.to-map {
  background-color: #f2f2f2;
  border-radius: 20rpx;
  padding: 25rpx;
  flex: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8rpx;
}

.nav-icon {
  width: 24px;
  height: 24px;
  transform: rotateZ(68deg);
}

.to-check {
  background-color: #d8301c;
  border-radius: 20rpx;
  padding: 25rpx;
  text-align: center;
  flex: 7;
  color: white;
}

.check-success {
  background-color: #d8301c;
  border-radius: 20rpx;
  padding: 25rpx;
  text-align: center;
  flex: 7;
  color: white;
}
</style>
